<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/docs.min.js"></script>
    <style>
        .progress-div{
            background: rgba(0, 0, 0, 0.03);
            width: 1000px;
            height: 140px;
            padding: 60px 20px;
            visibility: hidden;
        }
        .progress{
            margin: 0;
            /*position: fixed;*/
            /*top: 100px;*/
            /*left: 20px;*/
            width: 100%;
        }

    </style>
    <title>进度条</title>
</head>

{#https://blog.csdn.net/q1w2e3r4470/article/details/72702406#}
{#https://blog.csdn.net/qq_43192730/article/details/89845720#}

{#https://blog.csdn.net/persistencequxi/article/details/81168730#}


<body>
    <!--1. 按钮-->
    <div class="container">

        <button class="btn btn-default" type="button">展示进度条测试数据</button>


	    <!--2. 进度条-->
	    <div  class="progress-div">
	        <div class="progress">
	            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
	                2%
	            </div>
	        </div>
	    </div>

    </br>

         <div class="progress-text progress-bar-striped active"  role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">

	            </div>



    </div>
</body>
<script>

 $(function () {
        $('.btn').on('click', function () {
                console.log("come in ")
                var log = ""
                var sitv = setInterval(function(){

                    var prog_url = '/show_progress'              // prog_url指请求进度的url，后面会在django中设置
                    $.getJSON(prog_url, function(num_progress){


{#                         console.log("come in num_progress="+num_progress)#}
                        log = log + num_progress+ "-"
                        $('.progress-div').css('visibility', 'visible');
                        $('.progress-bar').css('width', num_progress + '%');
                        $('.progress-bar').text(num_progress + '%');
                        $('.progress-text').text( '显示日志'+log );
                        $('.progress-text').css('width', '100%');

            {#            $('#prog_in').width(res + '%');     // 改变进度条进度，注意这里是内层的div， res是后台返回的进度#}
                         if(num_progress == '99'){
                              console.log("come in 99")
                            clearInterval(sitv);
                            $('.progress-bar').css('width', '100%');
                            $('.progress-bar').text('100%');
                        }

                    });


                }, 10);                                 // 每10毫秒查询一次后台进度


            var thisurl = '/process_data'                      // 指当前页面的url
{#            var yourjson = '90'#}
            $.getJSON(thisurl, function(res){
            // ...

             console.log("sitv over res"+res)
                clearInterval(sitv);                   // 此时请求成功返回结果了，结束对后台进度的查询
            });

        })
})



</script>
</html>
